<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IFE task 1</title>
</head>
<body>
<header>
    <h1>网站一级标题</h1>
    <nav>
        <ul>
            <li><a href="#">导航链接一</a></li>
            <li><a href="#">导航链接二</a></li>
            <li><a href="#">导航链接三</a></li>
            <li><a href="#">导航链接四</a></li>
        </ul>
    </nav>
</header>
<article>
    <header>
        <h2>文章一级标题</h2>
        <h3>文章二级标题</h3>
    </header>
    <div>
        <span>文章作者</span>
        <time>文章发表时间</time>
    </div>
    <p>
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />
        这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
    </p>
    <img src="img/task1.png">
    <p>
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />
        这是一个很长很长的段落，换行了<br />
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com" target="_blank">这里有个链接点击后打开新窗口链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
    </p>
</article>
<article>
    <header>
        <h2>另一篇文章一级标题</h2>
        <h3>文章二级标题</h3>
    </header>
    <div>
        <span>文章作者</span>
        <time>文章发表时间</time>
    </div>
    <p>
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />
        这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
    </p>
    <img src="img/task1.png">
    <ul>
        <li>列表项目一</li>
        <li>列表项目二</li>
        <li>列表项目三</li>
    </ul>
    <section>
        <header>
            <h2>图片</h2>
        </header>
        <figure>
            <figcaption>好看的图片</figcaption>
            <img src="img/task1.png">
        </figure>
        <figure>
            <figcaption>好看的图片</figcaption>
            <img src="img/task1.png">
        </figure>
        <figure>
            <figcaption>好看的图片</figcaption>
            <img src="img/task1.png">
        </figure>
        <figure>
            <figcaption>好看的图片</figcaption>
            <img src="img/task1.png">
        </figure>
        <figure>
            <figcaption>好看的图片</figcaption>
            <img src="img/task1.png">
        </figure>
        <figure>
            <figcaption>好看的图片</figcaption>
            <img src="img/task1.png">
        </figure>
        <figure>
            <figcaption>好看的图片</figcaption>
            <img src="img/task1.png">
        </figure>
        <figure>
            <figcaption>好看的图片</figcaption>
            <img src="img/task1.png">
        </figure>
        <figure>
            <figcaption>好看的图片</figcaption>
            <img src="img/task1.png">
        </figure>
        <figure>
            <figcaption>好看的图片</figcaption>
            <img src="img/task1.png">
        </figure>
    </section>
</article>
<article>
    <header>
        <h2>最后一篇文章一级标题</h2>
        <h3>文章二级标题</h3>
    </header>
    <div>
        <span>文章作者</span>
        <time>文章发表时间</time>
    </div>
    <ol>
        <li>排名1</li>
        <li>排名2</li>
        <li>排名3</li>
    </ol>
    <span>下面是一个表格，给表格加了一个border='1'好让你看出是一个表格</span>
    <table border="1">
        <thead>
        <tr align="left">
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>表内容单元格</td>
            <td>表内容单元格</td>
            <td><a href="#">操作</a></td>
        </tr>
        <tr>
            <td>表内容单元格</td>
            <td>表内容单元格</td>
            <td><a href="#">操作</a></td>
        </tr>
        <tr>
            <td>表内容单元格</td>
            <td>表内容单元格</td>
            <td><a href="#">操作</a></td>
        </tr>
        <tr>
            <td>表内容单元格</td>
            <td>表内容单元格</td>
            <td><a href="#">操作</a></td>
        </tr>
        <tr>
            <td>总计</td>
            <td colspan="2">1000</td>
        </tr>
        </tbody>
    </table>
</article>
<aside>
    <header>
        <h2>这里以后是一个侧栏，这是侧栏的标题</h2>
        <h3>侧栏使用aside标签</h3>
    </header>
    <form>
        <p>请输入邮箱地址：<input type="email" placeholder="这是一个文本输入框"></p>
        <p>邮箱地址请按要求格式输入</p>
        <p>请输入密码:<input type="password" placeholder="这是一个文本输入框">请重复输入密码<input type="password" placeholder="这是一个文本输入框"></p>
        <p>密码请为6-16位英文数字</p>
        <section>性别：
            <input type="radio" id="male" name="sex" value="male" checked><label for="male">男</label>
            <input type="radio" id="female" name="sex" value="female"><label for="female">女</label>
            城市：
            <select name="city">
                <option value="beijing" selected>北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
            </select>
            爱好：
            <input id="sport" type="checkbox" value="sport"><label for="sport">运动</label>
            <input id="art" type="checkbox" value="art"><label for="art">艺术</label>
            <input id="science" type="checkbox" value="science"><label for="science">科学</label>
            个人描述：
            <textarea>这是一个多行输入框，输入您的个人描述</textarea>
            <button type="submit">确认提交</button>
        </section>
    </form>
</aside>
<footer>
    <p>版权所有&copy;</p>
</footer>
</body>
</html>